<template>
  <CollapsePanel name="element-job-execution">
    <template #header> ElementJobExecution </template>
    <p>element-job-execution</p>
  </CollapsePanel>
</template>

<script lang="ts">
  import { computed, defineComponent, onMounted, ref, watch } from 'vue';
  import modeler from '/@/store/modules/bpmnModeler';
  import { CollapsePanel } from 'ant-design-vue';

  import {
    getExternalTaskValue,
    getRetryTimeCycleValue,
    retryTimeCycleVisible,
    setExternalTaskValue,
    setRetryTimeCycleValue,
    taskPriorityVisible,
  } from '/@/components/BpmnChart/src/components/Panel/bo-utils/jobExecutionUtil';
  import { Base } from 'diagram-js/lib/model';
  import EventEmitter from '/@/utils/bpmn/EventEmitter';

  export default defineComponent({
    name: 'ElementJobExecution',
    components: { CollapsePanel },
    setup() {
      const modelerStore = modeler();
      const getActive = computed<Base | null>(() => modelerStore.getActive!);
      const getActiveId = computed<string>(() => modelerStore.getActiveId!);

      const retryTimeCycle = ref<string | undefined>(undefined);
      const rtVisible = ref<boolean>(false);
      const getRetryTimeCycle = () => {
        rtVisible.value = retryTimeCycleVisible(getActive.value!);
        retryTimeCycle.value = getRetryTimeCycleValue(getActive.value!) || '';
      };
      const setRetryTimeCycle = (value: string | undefined) => {
        setRetryTimeCycleValue(getActive.value!, value);
      };

      const taskPriority = ref<string | undefined>(undefined);
      const tpVisible = ref<boolean>(false);
      const getExternalTaskPriority = () => {
        tpVisible.value = taskPriorityVisible(getActive.value!);
        taskPriority.value = getExternalTaskValue(getActive.value!) || '';
      };
      const setExternalTaskPriority = (value: string | undefined) => {
        setExternalTaskValue(getActive.value!, value);
      };

      watch(
        () => getActiveId.value,
        () => {
          getRetryTimeCycle();
          getExternalTaskPriority();
        },
        { immediate: true },
      );

      onMounted(() => {
        getRetryTimeCycle();
        getExternalTaskPriority();

        EventEmitter.on('element-update', () => {
          getRetryTimeCycle();
          getExternalTaskPriority();
        });
      });

      return {
        retryTimeCycle,
        rtVisible,
        setRetryTimeCycle,
        taskPriority,
        tpVisible,
        setExternalTaskPriority,
      };
    },
  });
</script>
